<template>
  <div class="login">
    <div class="login-title"
         v-show="!sheet">
      <h1 style="font-size:2.6rem">太理拾课</h1>
      <span>Taiyuan University of Technology</span>

    </div>
    <v-btn color="rgb(255,255,255,0.3)"
           class="login-btn white--text"
           large
           v-show="!sheet"
           @click="sheet = !sheet">
      登录
    </v-btn>
    <v-bottom-sheet v-model="sheet">
      <v-sheet class="text-center"
               height="320px">
        <div class="py-3">
          <div class="mx-auto login-card">
            <v-card-title style="display: block;">用户登录</v-card-title>

            <v-form class="login-form"
                    ref="form"
                    v-model="valid"
                    lazy-validation>
              <v-text-field v-model="username"
                            maxlength="10"
                            :counter="10"
                            :rules="usernameRules"
                            label="学号"
                            required></v-text-field>

              <v-text-field v-model="password"
                            :rules="passwordRules"
                            label="密码"
                            type="password"
                            required></v-text-field>

              <v-card-actions>
                <v-btn :disabled="!valid"
                       color="#2C2933"
                       width="100px"
                       class="white--text"
                       @click="submit">
                  登录
                </v-btn>

                <v-btn color="#4E597C"
                       width="100px"
                       class="white--text"
                       @click="reset">
                  重置
                </v-btn>
              </v-card-actions>

            </v-form>
          </div>
        </div>
      </v-sheet>
    </v-bottom-sheet>

    <div class="text-center ma-2">
      <v-snackbar v-model="snackbar">
        {{ text }}
        <v-btn color="pink"
               text
               @click="snackbar = false">
          关闭
        </v-btn>
      </v-snackbar>
    </div>
  </div>

</template>

<script>
export default {
  data () {
    return {
      valid: false,
      username: '',
      usernameRules: [
        v => !!v || '学号不能为空',
        v => (v && v.length >= 10) || '学号不能小于10位数'
      ],
      password: '',
      passwordRules: [
        v => !!v || '密码不能为空',
        v => (v && v.length >= 6) || '密码不能小于6位数'
      ],
      snackbar: false,
      text: 'Hello, I\'m a snackbar',
      sheet: false
    }
  },

  methods: {
    submit () {
      this.$refs.form.validate()
      if (this.username != '' && this.password != '') { // eslint-disable-line eqeqeq
        this.login()
      }
    },
    reset () {
      this.$refs.form.reset()
    },
    login () {
      var data = {
        username: this.username,
        password: this.password
      }
      this.$axios({
        method: 'POST',
        url: '/login',
        data,
        headers: {
          'Access-Control-Allow-Origin': '*',
          'Content-Type': 'application/json'
        }
      })
        .then((response) => {
          if (response.data.state == 200) { // eslint-disable-line eqeqeq
            var storage = window.localStorage
            // 写入a字段
            storage.token = response.data.token
            this.snackbar = true
            this.text = response.data.message
            this.$router.push('/welcome')
          } else {
            this.snackbar = true
            this.text = response.data.message
          }
        })
        .catch((error) => { // eslint-disable-line handle-callback-err
          this.snackbar = true
          this.text = '登录失败,请检查网络'
        })
    }
  }
}
</script>

<style scoped>
.login {
  width: 100%;
  height: 100%;
  background-image: url('../assets/login-img.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  overflow: hidden;
}
.login-card {
  width: 90%;
  height: 300px;
  margin: 0 auto;
}
.login-form {
  margin: 20px;
}
.v-card__actions {
  text-align: center;
  display: block;
}
.text-center {
  background: rgb(255, 255, 255, 0.8);
}
.login-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 80px;
  margin: 0 auto;
  width: 300px;
  border-radius: 20px;
  border: solid 1px white;
}
.login-title {
  position: fixed;
  width: 100%;
  left: 50%;
  top: 35%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  text-align: center;
  color: #fff;
  text-shadow: 2px 2px 20px #000;
}
</style>
